// ------------------------------------------------------------------------------------添加新用户

//用户上传头像后预览头像图片
const avatarInput=document.getElementById('avatar');
if(avatarInput) {
    avatarInput.addEventListener('change',function (event){
        const file=event.target.files[0];
        // 如果有文件并且文件的类型是图片
        if(file && file.type.startsWith('image/')){
            const reader=new FileReader();
            //当文件读取成功时就改变头像图片的路径
            reader.onload=function (e){
                document.getElementById('avatar-img').src=e.target.result;
            }
            // 当文件读取失败时就弹框
            reader.onerror=function (){
                alert('头像读取失败，请重新上传！')
            }
            // 将文件读取为 Base64 编码的 DataURL（常用于图片预览）。
            reader.readAsDataURL(file);
        }
    })
}


// 实现简单的表单验证功能
const userAddForm=document.querySelector('.user-add-form');
if(userAddForm){
    userAddForm.addEventListener('submit',function (e){
        // 阻止默认事件
        e.preventDefault();
        let isValid=true;

        // 重置所有的错误信息
        document.querySelectorAll('.error').forEach(mes => mes.textContent='');

        // 验证用户昵称：去空格后字符范围0< <20
        const nickname=document.getElementById('nickname').value.trim();
        if(nickname.length==0) {
            document.getElementById('nicknameError').textContent='请输入昵称';
            isValid=false;
        }
        else if(nickname.length>20) {
            document.getElementById('nicknameError').textContent='昵称不得超过20字符';
            isValid=false;
        }

        // 验证用户名：6-20位，只能包含字母数字下划线，开头只可用字母下划线
        const username=document.getElementById('username').value.trim();
        const pattern = /^[A-Za-z_][A-Za-z0-9_]*$/;
        if(username.length>20 || username.length<6) {
            document.getElementById('usernameError').textContent='用户名长度限6-20位';
            isValid=false;
        }
        else if(!pattern.test(username)) {
            document.getElementById('usernameError').textContent='用户名必须以字母、下划线开头，可以使用6-20位的数字、字母、下划线或它们的组合';
            isValid=false;
        }

        // 验证邮箱
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const email=document.getElementById('email').value.trim();
        if(email.length==0) {
            document.getElementById('emailError').textContent='请输入邮箱';
            isValid=false;
        }
        else if(!emailPattern.test(email)) {
            document.getElementById('emailError').textContent='请输入正确的邮箱';
            isValid=false;
        }

        //  验证密码，0< <20
        const password=document.getElementById('password').value.trim();
        if(password.length==0) {
            document.getElementById('passwordError').textContent='请输入密码';
            isValid=false;
        }
        else if(password.length>20) {
            document.getElementById('passwordError').textContent='密码长度不得超过20位';
            isValid=false;
        }

        // 如果验证通过，提交表单
        if(isValid) {
            this.submit();
        }
    })
}
